<template>
  <div>
    <div class="row">
      <div class="col-sm-12 col-md-12 mt-4">
        <div class="card mb-3 overflow-hidden">
          <div class="row g-0">
            <div class="col-md-4">
              <img style="width: 100%;height: 100%" :src="'http://127.0.0.1/'+detail.img"
                   class="img-fluid rounded-start" alt="...">
            </div>
            <el-tag
                class="status"
                :type="detail.status === 1?'':detail.status === 2?'info':'danger'"
                size="small"
                effect="dark">
              {{ detail.status === 1 ? '可报名' : detail.status === 2 ? '进行中' : '已结束' }}
            </el-tag>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">
                  {{ detail.name }}
                  <el-tag
                      type=""
                      size="small"
                      effect="dark">
                    {{ detail.raceType === 'T1' ? '团队赛' : '个人赛' }}
                  </el-tag>
                </h5>
                <p class="card-text mt-5">
                  <el-steps
                      :active="detail.stage">
                    <el-step :title="'报名参赛'+detail.applyStartDate" icon="el-icon-edit"></el-step>
                    <el-step :title="'作品评审'+detail.startDate" icon="el-icon-upload"></el-step>
                    <el-step :title="'公布成绩'+detail.endDate" icon="el-icon-success"></el-step>
                  </el-steps>
                  <button class="btn btn-primary mt-4" data-bs-toggle="modal" data-bs-target="#staticBackdrop"
                          @click="handleApply">立即报名
                  </button>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  详情介绍  -->
    <div class="row">
      <div class="col-sm-12 col-md-12 mt-4">
        <div class="card text-dark mb-3">
          <h5 class="card-header">大赛介绍</h5>
          <div class="card-body">
            <p class="card-text" v-html="detail.content">
            </p>
          </div>
        </div>
      </div>
    </div>

    <!--   模态框 -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">{{ modelTitle }}</h5>
            <button type="button" class="btn-close" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <template v-if="isVisibleForm">
              <form>
                <div class="mb-3">
                  <label for="userName" class="form-label">姓名</label>
                  <input disabled v-model="userInfo.name" type="text" class="form-control" id="userName">
                </div>
                <div class="mb-3">
                  <div class="form-check form-check-inline">
                    <input disabled v-model="userInfo.sex" class="form-check-input" type="radio" name="sex" id="male"
                           value="male">
                    <label class="form-check-label" for="sex">男</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input disabled v-model="userInfo.sex" class="form-check-input" type="radio" name="sex" id="female"
                           value="female">
                    <label class="form-check-label" for="sex">女</label>
                  </div>
                </div>
                <div class="mb-3">
                  <label for="IDCard" class="form-label">身份证号</label>
                  <input disabled type="text" v-model="userInfo.IDCard" class="form-control" id="IDCard">
                </div>
                <div class="mb-3">
                  <label for="schoolName" class="form-label">学校</label>
                  <input disabled type="text" :value="userInfo.schoolName|school" class="form-control" id="schoolName">
                </div>
                <div class="mb-3">
                  <label for="Sno" class="form-label">学号</label>
                  <input disabled type="text" v-model="userInfo.Sno" class="form-control" id="Sno">
                </div>
                <div class="mb-3">
                  <label for="collegeName" class="form-label">学院</label>
                  <input disabled type="text" :value="userInfo.collegeName|college" class="form-control"
                         id="collegeName">
                </div>
                <div class="mb-3">
                  <label for="majorName" class="form-label">专业</label>
                  <input disabled type="text" :value="userInfo.majorName|major" class="form-control" id="majorName">
                </div>
              </form>
            </template>
            <template v-else>
              您还没有通过认证，请到个人中心完成认证信息！
            </template>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <template v-if="isVisibleForm">
              <button type="button" class="btn btn-primary" @click="ApplyConfirm">确认</button>
            </template>
            <template v-else>
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确认</button>
            </template>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import user from "../../../api/user";
import school from "../../../filter/school";
import college from "../../../filter/college";
import major from "../../../filter/major";
import NoticeTime from "../../../filter/NoticeTime";

export default {
  name: "detail",
  components: {},
  mounted() {
    user.GetContestByID({id: JSON.parse(localStorage.getItem("detailId"))}).then(r => {
      this.detail = r.data.data.c
    })
  },
  data() {
    return {
      detail: '',
      isVisibleForm: true,
      modelTitle: '在线报名',
      userInfo: ''
    }
  },
  filters: {
    school, college, major,
    NoticeTime
  },
  methods: {

    handleApply() {
      if (this.$store.getters["userStore/userInfo"].status === 0) {
        this.modelTitle = "温馨提示"
        this.isVisibleForm = false
      } else {
        this.modelTitle = "在线报名"
        this.isVisibleForm = true
        this.userInfo = this.$store.getters["userStore/userInfo"]
      }
    },
    ApplyConfirm() {
      const param = {
        userID: this.userInfo._id,
        contestID: this.detail._id
      }
      const loading = this.$loading({
        lock: true,
        text: '删除中...请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      user.ApplyFormSubmit(param).then(r => {
        if (r.data.data.msg === '已存在') {
          this.$message({
            message: '您已报名该项目，请勿重复报名',
            type: 'warning'
          });
        } else {
          this.$message({
            message: '报名成功',
            type: 'success'
          });
        }
        loading.close()
      }).catch(() => {
        this.$message.error('删除失败');
        loading.close()
      })
    }
  }
}
</script>

<style scoped>
.el-breadcrumb-item-child {
  margin-top: 20px;
  position: relative;
  margin-bottom: 20px;
  height: 330px;
}

.el-breadcrumb-item-child /deep/ .el-card__body {
  width: 96%;
  display: flex;
}

.child-title {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
}

.child-title .el-button {
  position: absolute;
  right: 0;
}

.child-content {
  width: 100%;
}


.status {
  position: absolute;
  left: 0;
  top: 10px;
  transform: rotateZ(-45deg) translateY(-40px);
  width: 90px;
  height: 45px;
  padding-top: 25px;
  padding-left: 18px;
}

.tag-title {
  position: absolute;
  left: 0;
  transform: translate(20px, 20px);
}


.desc {
  background-color: white;
}

.icon-tuanduihezuo {
  font-size: 28px;

}
</style>